﻿<%@ Page Culture="auto" UICulture="auto" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="DataBindingExamplePage.aspx.cs"
    Inherits="BM.Tools.WebControls.MForm.Example.Display.DataBindingExamplePage"
    Title="Data binding example" %>

<%@ Register TagPrefix="mf2" Namespace="BM.Tools.WebControls.MForm.Controls" Assembly="BM.Tools.WebControls.MForm" %>
<%@ Register TagPrefix="c" Namespace="BM.Tools.WebControls.MForm.Controls.Additions"
    Assembly="BM.Tools.WebControls.MForm" %>
<%@ Register TagPrefix="vh" Namespace="BM.Tools.WebControls.MForm.Controls.ValueHandlers"
    Assembly="BM.Tools.WebControls.MForm" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Description" runat="server">
    <style type="text/css">
        .Wide
        {
            width: 100%;
        }
    </style>
    <asp:XmlDataSource ID="OfficeData" runat="server">
        <Data>
            <Office>
                <Person id="1">
                    <FirstName>Adam</FirstName>
                    <Surname>Badam</Surname>
                    <Sex>Male</Sex>
                    <Position>Assistant</Position>
                    <Payment type="salary">
                        <Year>2008</Year>
                        <Month>10</Month>
                        <Value>3200</Value>                        
                    </Payment>
                    <Payment type="salary">
                        <Year>2008</Year>
                        <Month>11</Month>
                        <Value>3300</Value>                        
                    </Payment>
                    <Payment type="bonus">
                        <Year>2008</Year>
                        <Month>12</Month>
                        <Value>3200</Value>                        
                    </Payment>
                </Person>
                <Person id="2">
                    <FirstName>Anna</FirstName>
                    <Surname>Wanna</Surname>
                    <Sex>Female</Sex>
                    <Position>Consultant</Position>
                    <Payment type="salary">
                        <Year>2008</Year>
                        <Month>10</Month>
                        <Value>3700</Value>                        
                    </Payment>
                    <Payment type="bonus">
                        <Year>2008</Year>
                        <Month>11</Month>
                        <Value>3600</Value>                        
                    </Payment>
                    <Payment type="bonus">
                        <Year>2008</Year>
                        <Month>12</Month>
                        <Value>3900</Value>                        
                    </Payment>
                </Person>
                <Address >
                    <Street>Rycerska</Street>
                    <HouseNumber>9</HouseNumber>
                    <City>Gniezno</City>
                    <PostCode>33-345</PostCode>
                </Address>
            </Office>                            
        </Data>
    </asp:XmlDataSource>
    <div class="Section">
        <p>
            Because all MForm repeated items implement the <code>IDataItemContainer</code> interface,
            it is possible to get the Xml node associated with the item, with the use of <code>XPath</code>
            and <code>XPathSelect</code> methods.
        </p>
        <p>
            Using the <code>&lt;%# XPath("xpathExpression") %&gt;</code> or <code>&lt;%# XPathSelect("xpathExpression") %&gt;</code> inside the <code>Content</code> property of MForm controls, 
            XML data of the current navigator context can be retrieved. 
        </p>        
        <p>
            In the following example, the office data is presented. The <code>Payment</code>
            element of the <code>Person</code> element is not displayed with the use of MForm.
            Instead, a databound gridview is created.
        </p>
        <p>
            Notice, that all this functionality was created without the use of a single line
            in code-behind.
        </p>
        <div class="Remark">
            <p>The data binding syntax for XML data is rendered on the server side, so if you change
            data that was used in the binding on client side, the rendered data bound text will
            not get modified. If you for example change the first name of surname of a user,
            the title "Payment of {FirstName} {Surname}" will not change.</p>
        </div>
        <div class="Remark">
            <p>Also special care should be taken, when using this functionality with items that
            can be added. The added elements template will have no databound XML data during
            generation, so nothing is rendered in the places of using those script tags. Press
            "Add person" and you will see the effects.</p>
        </div>
    </div>
    <mf2:Root runat="server" ID="OfficeForm" DataSourceID="OfficeData">
        <Contents>
            <mf2:Branch runat="server" Name="Office">
                <Contents>
                    <mf2:Branch runat="server" MaxOccurs="10" Name="Person">
                        <Contents>
                            <mf2:Leaf runat="server" Name="FirstName" />
                            <mf2:Leaf runat="server" Name="Surname" />
                            <mf2:Leaf runat="server" Name="Sex">
                                <ValueHandler>
                                    <vh:DropDownListValueHandler runat="server">
                                        <DropDownList>
                                            <asp:ListItem Value="Female">#Female#</asp:ListItem>
                                            <asp:ListItem Value="Male">#Male#</asp:ListItem>
                                        </DropDownList>
                                    </vh:DropDownListValueHandler>
                                </ValueHandler>
                            </mf2:Leaf>
                            <mf2:Leaf runat="server" Name="Position">
                                <ValueHandler>
                                    <vh:DropDownListValueHandler runat="server">
                                        <DropDownList>
                                            <asp:ListItem Value="Assistant">#Assistant#</asp:ListItem>
                                            <asp:ListItem Value="Consultant">#Consultant#</asp:ListItem>
                                            <asp:ListItem Value="Advisor">#Advisor#</asp:ListItem>
                                            <asp:ListItem Value="Manager">#Manager#</asp:ListItem>
                                            <asp:ListItem Value="Specialist">#Specialist#</asp:ListItem>
                                            <asp:ListItem Value="Expert">#Expert#</asp:ListItem>
                                        </DropDownList>
                                    </vh:DropDownListValueHandler>
                                </ValueHandler>
                            </mf2:Leaf>
                            <div class="WC">
                                <div class="Title" style="clear: both">
                                    <div class="Content">
                                        Payment of
                                        <%# XPath("FirstName") %>
                                        <%# XPath("Surname") %></div>
                                </div>
                                <asp:GridView runat="server" CssClass="Wide" DataSource='<%# XPathSelect("Payment") %>'
                                    AutoGenerateColumns="False">
                                    <Columns>
                                        <asp:TemplateField HeaderText="Type">
                                            <ItemTemplate>
                                                <%# XPath("@type") %>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="Date">
                                            <ItemTemplate>
                                                <%# XPath("Year") %>-<%# XPath("Month") %>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="Value">
                                            <ItemTemplate>
                                                <%# XPath("Value") %>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                    </Columns>
                                </asp:GridView>
                            </div>
                        </Contents>
                    </mf2:Branch>
                    <mf2:Branch runat="server" Name="Address">
                        <Contents>
                            <mf2:Leaf runat="server" Name="Street">
                            </mf2:Leaf>
                            <mf2:Leaf runat="server" Name="HouseNumber">
                            </mf2:Leaf>
                            <mf2:Leaf runat="server" Name="City">
                            </mf2:Leaf>
                            <mf2:Leaf runat="server" Name="PostCode">
                            </mf2:Leaf>
                        </Contents>
                    </mf2:Branch>                    
                </Contents>
            </mf2:Branch>
        </Contents>
    </mf2:Root>
</asp:Content>
